<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./src/css/output.css" rel="stylesheet">
    <script src="src/js/NavMobileMenu.js" defer></script>
    <title>Engage ADS</title>
</head>
<body class="bg-black overflow-x-hidden">
<div class="flex flex-col min-h-screen bg-no-repeat bg-cover bg-center" style="background-image: url('src/img/bg-full.png')">
    <header class="md:static md:z-auto fixed top-0 left-0 right-0 z-40 bg-black/80 md:bg-transparent">
        <div class="flex items-center justify-between md:h-auto py-6 mx-4 md:mx-10 lg:mx-12 border-b border-b-white/20">
            <div class="flex">
                <a href="#" class="flex items-center space-x-4">
                    <img src="src/img/logo-small.png" alt="logo">
                    <h3 class="whitespace-nowrap text-white text-xl">Engage ADS</h3>
                </a>
            </div>
            <div id="links" class="hidden md:flex whitespace-nowrap items-center text-lg md:text-base text-white flex-col md:flex-row space-y-12 md:space-y-0 py-12 md:py-0 md:space-x-8 lg:space-x-16 md:ps-24 ps-0">
                <a href="#">Litepaper</a>
                <a href="#">About us</a>
                <a href="#">Blog</a>
            </div>
            <div id="top-right-buttons" class="hidden md:w-auto md:min-w-min h-full md:h-auto md:flex md:space-x-6 lg:space-x-10">
                <div id="language-dropdown" class="flex space-x-3 items-center justify-center ps-3">
                    <img src="src/img/flags/uk.png" alt="flag">
                    <p class="text-white">EN</p>
                    <div class="flex">
                        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 1L5 5L1 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>
                <button class="flex justify-center text-[#00B5FF] space-x-2.5 bg-[#000F19] rounded-full w-full min-w-full md:min-w-min md:w-auto px-5 py-3.5 hover:bg-[#0093FD] hover:text-white">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 3V21" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16.1667 6H9.91667C9.14312 6 8.40125 6.31607 7.85427 6.87868C7.30729 7.44129 7 8.20435 7 9C7 9.79565 7.30729 10.5587 7.85427 11.1213C8.40125 11.6839 9.14312 12 9.91667 12H14.0833C14.8569 12 15.5987 12.3161 16.1457 12.8787C16.6927 13.4413 17 14.2044 17 15C17 15.7956 16.6927 16.5587 16.1457 17.1213C15.5987 17.6839 14.8569 18 14.0833 18H7" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span class="whitespace-nowrap">Buy now</span>
                </button>
            </div>
            <button id="hamburger" class="relative w-10 h-10 focus:outline-none md:hidden text-white">
                <!-- Hamburger SVG -->
                <svg id="hamburgerIcon" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 22.6667H28" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M4 16H28" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M4 9.33334H28" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <!-- Close SVG -->
                <svg id="closeIcon" class="hidden z-10" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M27.9999 27.9999L4 4" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M28.0001 4L4 28.0001" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
            <img src="src/img/navbar-gradient.png" class="hidden md:absolute -z-10 left-[40%] inset-0" alt="">
        </div>
    </header>
    <!-- Mobile menu -->
    <div id="mobileMenu" class="hidden fixed inset-0 bg-black z-30 flex-col content-between items-center justify-center transform -translate-y-full overflow-y-auto overflow-x-hidden w-screen mt-24 pt-16">
        <div class="flex flex-col space-y-12 text-white text-lg text-center">
            <a href="#">Litepaper</a>
            <a href="#">About us</a>
            <a href="#">Blog</a>
        </div>
        <div class="flex space-x-3 items-center justify-center mt-12">
            <img src="src/img/flags/uk.png" alt="flag">
            <p class="text-white">EN</p>
            <div class="flex">
                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 1L5 5L1 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
        </div>
        <div class="flex-grow"></div>
        <div class="flex justify-center text-[#00B5FF] space-x-2.5 mb-7 w-full px-5">
            <button class="flex justify-center text-[#00B5FF] space-x-2.5 bg-[#000F19] rounded-full w-full py-3.5 hover:bg-[#0093FD] hover:text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 3V21" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16.1667 6H9.91667C9.14312 6 8.40125 6.31607 7.85427 6.87868C7.30729 7.44129 7 8.20435 7 9C7 9.79565 7.30729 10.5587 7.85427 11.1213C8.40125 11.6839 9.14312 12 9.91667 12H14.0833C14.8569 12 15.5987 12.3161 16.1457 12.8787C16.6927 13.4413 17 14.2044 17 15C17 15.7956 16.6927 16.5587 16.1457 17.1213C15.5987 17.6839 14.8569 18 14.0833 18H7" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="whitespace-nowrap">Buy now</span>
            </button>
        </div>
    </div>
    <main class="md:mt-0 mt-24">
        <div id="content" class="flex flex-col justify-center items-center text-white p-5">
            <div>
                <div class="flex flex-col justify-center items-center text-white" style="background: radial-gradient(#00D8FD59, transparent 60%);">
                    <img src="src/img/logo-big.png" alt="logo" class="w-1/2 h-auto my-16">
                </div>
            </div>
            <div class="flex flex-col md:flex-row space-x-3 pb-12">
                <h1 class="text-4xl md:text-5xl font-light text-center md:mb-12 whitespace-nowrap">Engage ADS on</h1>
                <h1 class="text-4xl md:text-5xl font-light text-center md:mb-12 whitespace-nowrap">Ton Open Network</h1>
            </div>
            <div class="flex flex-col justify-center items-center border border-white/20 rounded-md p-7 w-full max-w-[978px]">
                <div class="flex flex-col sm:flex-row border-b border-b-white/20 pb-6 sm:space-x-4 space-y-3 sm:space-y-0">
                    <div class="flex items-center space-x-2">
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="min-w-8">
                            <path d="M9.33334 28C7.86058 28 6.66667 26.8061 6.66667 25.3333V6.66667C6.66667 5.19391 7.86058 4 9.33334 4H18.6667L25.3333 10.6667V25.3333C25.3333 26.8061 24.1394 28 22.6667 28H9.33334Z" stroke="#01AFF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M17.3333 4V12H25.3333" stroke="#01AFF6" stroke-width="2" stroke-linejoin="round"/>
                            <path d="M12 17.3333H20" stroke="#01AFF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M12 22.6667H20" stroke="#01AFF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <p class="text-lg sm:text-base">Contract Address:</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="flex flex-wrap">
                            <p class="break-all opacity-75 ps-1.5 sm:ps-0">EQDE2iOVhvteBA8bCxywcmCOPVxJGltPhft8RYDTXiv4lmvM</p>
                        </div>
                        <button>
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="min-w-8">
                                <g opacity="0.2">
                                    <path d="M17.3333 28L5.33334 28C4.59696 28 4 27.403 4 26.6667L4 9.33333C4 8.59695 4.59695 8 5.33333 8L12.7811 8C13.1347 8 13.4738 8.14048 13.7239 8.39052L18.2761 12.9428C18.5262 13.1929 18.6667 13.532 18.6667 13.8856V26.6667C18.6667 27.403 18.0697 28 17.3333 28Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M13.3334 8L13.3334 5.33333C13.3334 4.59695 13.9303 4 14.6667 4L22.1144 4C22.468 4 22.8072 4.14048 23.0572 4.39052L27.6095 8.94281C27.8596 9.19286 28 9.53199 28 9.88562V22.6667C28 23.403 27.4031 24 26.6667 24L18.6667 24" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M18.6667 14.6667L13.3333 14.6667C12.597 14.6667 12 14.0697 12 13.3333L12 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M28 10.6667L22.6667 10.6667C21.9303 10.6667 21.3334 10.0697 21.3334 9.33333L21.3334 4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </g>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="flex flex-col md:flex-row text-[#00B5FF] pt-6 space-x-0 md:space-x-2 space-y-3 md:space-y-0 w-full min-w-full h-auto items-center justify-center">
                    <button class="flex space-x-2.5 bg-[#000F19] rounded-full px-8 py-3.5 hover:bg-[#0093FD] hover:text-white w-full whitespace-nowrap justify-center">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 3V21" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M16.1667 6H9.91667C9.14312 6 8.40125 6.31607 7.85427 6.87868C7.30729 7.44129 7 8.20435 7 9C7 9.79565 7.30729 10.5587 7.85427 11.1213C8.40125 11.6839 9.14312 12 9.91667 12H14.0833C14.8569 12 15.5987 12.3161 16.1457 12.8787C16.6927 13.4413 17 14.2044 17 15C17 15.7956 16.6927 16.5587 16.1457 17.1213C15.5987 17.6839 14.8569 18 14.0833 18H7" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <span>Buy now</span>
                    </button>
                    <button class="flex space-x-2.5 bg-[#000F19] rounded-full px-8 py-3.5 hover:bg-[#0093FD] hover:text-white w-full whitespace-nowrap justify-center">
                        <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M21.125 20H3.125V5" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M21.125 7L13.125 14L9.125 10L3.125 15" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <span>Live chart</span>
                    </button>
                    <button class="flex space-x-2.5 bg-[#000F19] rounded-full px-8 py-3.5 hover:bg-[#0093FD] hover:text-white w-full whitespace-nowrap justify-center">
                        <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.375 21C6.27043 21 5.375 20.1046 5.375 19V5C5.375 3.89543 6.27043 3 7.375 3H14.375L19.375 8V19C19.375 20.1046 18.4796 21 17.375 21H7.375Z" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M13.375 3V9H19.375" stroke="#00B5FF" stroke-width="1.5" stroke-linejoin="round"/>
                        </svg>
                        <span>Litepaper</span>
                    </button>
                    <button class="flex space-x-2.5 bg-[#000F19] rounded-full px-8 py-3.5 hover:bg-[#0093FD] hover:text-white w-full whitespace-nowrap justify-center">
                        <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.125 20C7.125 18.3431 9.36358 17 12.125 17C14.8864 17 17.125 18.3431 17.125 20" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M18.125 14.2495C19.8909 14.7124 21.125 15.7697 21.125 16.9999" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M6.125 14.2495C4.3591 14.7124 3.125 15.7697 3.125 16.9999" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M12.125 14C13.7819 14 15.125 12.6569 15.125 11C15.125 9.34315 13.7819 8 12.125 8C10.4681 8 9.125 9.34315 9.125 11C9.125 12.6569 10.4681 14 12.125 14Z" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M18.125 10.2361C18.7387 9.68679 19.125 8.8885 19.125 8C19.125 6.34315 17.7819 5 16.125 5C15.3566 5 14.6558 5.28885 14.125 5.76389" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M6.125 10.2361C5.51125 9.68679 5.125 8.8885 5.125 8C5.125 6.34315 6.46815 5 8.125 5C8.89335 5 9.59424 5.28885 10.125 5.76389" stroke="#00B5FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <span>Our team</span>
                    </button>
                </div>
            </div>
        </div>
    </main>
    <footer id="footer" class="mt-auto">
        <div class="flex flex-col-reverse md:flex-row text-white/30 justify-between items-center px-12 py-2 md:mb-5">
            <p class="whitespace-nowrap pb-10 md:pb-0">© 2024 Engage ADS. All rights reserved.</p>
            <div class="flex space-x-7 md:space-x-3 items-center pb-7 md:pb-0">
                <a href="#" class="rounded-full hover:bg-[#0093FD] min-w-8">
                    <img src="src/img/fb-logo.svg">
                </a>
                <a href="#" class="rounded-full hover:bg-[#0093FD] min-w-8">
                    <img src="src/img/insta-logo.svg">
                </a>
                <a href="#" class="rounded-full hover:bg-[#0093FD] min-w-8">
                    <img src="src/img/x-logo.svg">
                </a>
                <a href="#" class="rounded-full hover:bg-[#0093FD] min-w-8">
                    <img src="src/img/telegram-logo.svg">
                </a>
                <a href="#" class="rounded-full hover:bg-[#0093FD] min-w-8">
                    <img src="src/img/discord-logo.svg">
                </a>
                <a href="#" class="rounded-full hover:bg-[#0093FD] min-w-8">
                    <img src="src/img/youtube-logo.svg">
                </a>
            </div>
        </div>
    </footer>
</div>

</body>
</html>